<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <!-- 强制绑定   : 和v-bind: 写法一样 -->
  <div id="app" :name="msg">
    <div :name="three?'xiaoming':'xiaohu'">{{one}}</div>
  </div>
</body>
<script type="text/javascript">
  const vm = new Vue({
    el: "#app",
    data() {
      //data的函数式写法  将需要使用的值放在返回值里
      return {
        msg: 'hello World',
        one: 'hi 小瘪三'
      }
    },
    template: `<p>{{msg}}</p>`
  })
  // template配置项
  // 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素 覆盖
  // 写法是通用的
  new Vue({
    data() {
      return {
        one: 'hello World',
        msg: 'hello Vue',
        three: 'true'
      }
    }
  }).$mount('#app')
</script>

</html>